<template>
  <div id="app">
    <!-- 头部 -->
    <mt-header fixed title="阔 落 商 城">
      <router-link to="/" slot="left">
        <mt-button icon="back" @click="prev()">返回</mt-button>
      </router-link>
      <mt-button icon="more" slot="right"></mt-button>
    </mt-header>

    <!-- 路由组件的出口 -->
    <transition name="fade" mode="out-in">
      <router-view />
    </transition>

    <!-- 重做 底部栏 -->
    <div class="tabBar">
      <ul>
        <li v-for="(tab, index) in tabs" :key="index">
          <!-- 路由中需要click.native 才会触发点击事件 （ 默认点击是无效的 -->
          <router-link :to="tab.routerName"  @click.native="changeHash(index)" :class="{'link-active': index == currentIndex}">
            <img :src="tab.imgSrc" alt="tabBar" />
            <p>{{tab.title}}</p>
            <mt-badge size="small" color="#f00" v-if="index===2">{{pickNum}}</mt-badge>
          </router-link>
        </li>
      </ul>
    </div>
    <!-- 底部栏 -->
    <!-- <mt-tabbar fixed v-model="selected">
      <mt-tab-item id="home">
        <img slot="icon" src="./assets/index.png" />
        首页
      </mt-tab-item>
      <mt-tab-item id="vip">
        <img slot="icon" src="./assets/vip.png" />
        会员
      </mt-tab-item>
      <mt-tab-item id="cart">
        <img slot="icon" src="./assets/shopcart.png" />
        购物车
      </mt-tab-item>
      <mt-tab-item id="search">
        <img slot="icon" src="./assets/search.png" />
        我的
      </mt-tab-item>
    </mt-tabbar>-->
  </div>
</template>

<script>
import index from "./assets/index.png";
import vip from "./assets/vip.png";
import shopcart from "./assets/shopcart.png";
import search from "./assets/search.png";
let tabs = [
  { id: 1, title: "首页", imgSrc: index, routerName: { name: "home" } },
  { id: 2, title: "会员", imgSrc: vip, routerName: { name: "vip" } },
  { id: 3, title: "购物车", imgSrc: shopcart, routerName: { name: "cart" } },
  { id: 4, title: "查找", imgSrc: search, routerName: { name: "search" } }
];
/* 导入 处理购物车 js文件  */
import GoodsTool from "@/GoodsTool.js";

export default {
  name: "App",
  data() {
    return {
      selected: "",
      tabs: tabs,
      currentIndex: 0,
      // pickNum: 0 //底部栏 购物车 角标 数量
    };
  },
  // watch: {
  //   selected: function(newV, oldV) {
  //     console.log(newV, oldV);
  //     // console.log(this.selected);

  //     this.$router.push({ name: this.selected });
  //   }
  // },
  methods: {
    prev() {
      this.$router.back();
    },
    changeHash(index) {
      this.currentIndex = index;
    }
  },
  computed:{
    pickNum(){
      return this.$store.getters.getShopNum;
    }
  },
  created(){
    /* 挂载 bus 总线   绑定事件*/
    // this.$bus.$on('sendPickNum', (data)=>{
    //   this.pickNum += data;
    // });

    // /* 获取购物的总数 */
    // this.pickNum = GoodsTool.getTotalCount();
    this.$store.dispatch('changeShopNumAction', GoodsTool.getTotalCount());
  }
};
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
}
body {
  padding-top: 41px !important;
}
/* 淡入淡出 */
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to{
  opacity: 0;
}

.tabBar {
  width: 100%;
  height: 55px;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
  background-color: #ddd;
}
.tabBar ul {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}
.tabBar ul li {
  width: 22%;
  height: 55px;
  text-align: center;
  // background-color: #888;
}
.tabBar ul li a {
  display: inline-block;
  width: 100%;
  height: 100%;
  padding-top: 10px;
  font-size: 14px;
  position: relative;
}
.tabBar ul li a.link-active {
  background-color: #66ffff;
}
.tabBar ul li img {
  width: 24px;
}
.tabBar .mint-badge {
  position: absolute;
  top: 5px;
  right: 5px;
}
</style>
